<template>
	<view class="container">
		<view class="city" @click="jump">
			{{city}}
		</view>
		<view class="area">
			{{area}}
		</view>
		<view class="weather">
			{{now}}
			<text style="font-size: 30rpx;">{{nowinfo}}</text>
		</view>
		<view class="minmax">
			{{temperature}}
			
		</view>
		<view class="wu">
			空气{{wu}}
		</view>
		<view class="other">
			<view class="text" v-for="(item,index) in otherweather" :key="index">
				<text class="">
					{{item.date}}
				</text>
				<text class="" style="margin-left: 100rpx;">
					{{item.weather}}
				</text>
				<text class="" style="float: right;">
					{{item.temperature}}
				</text>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		get3DaysTemperature,
		getNowTemperature,
		getNowAir
	} from '../../common/api';
	export default {
		data() {
			return {
				city:"",
				area:"",
				now:"",
				nowinfo:"",
				wu:"",
				temperature:"",
				otherweather: [],
				air:["优","良","轻度污染","重度污染","中度污染","严重污染"]
			};
		},
		onLoad() {
			this.city = uni.getStorageSync('city') || "wenzhou"
			this.get3DaysTemperature(this.city)
			this.getNowTemperature(this.city)
			this.getNowAir()
		},
		methods: {
			async get3DaysTemperature(val) {
				var data = {
					params: {
						key: "SW_hd8gUq3n4fzxlF",
						location: val,
						language: "zh-Hans",
						unit: "c",
						start: -1,
						days: 10
					}

				}
				await get3DaysTemperature(data).then(res => {
					console.log("3天天气预报")
					this.city = res.location.name
					this.area = res.location.path
					this.temperature = res.daily[0].high + "°/" + res.daily[0].low + "°"
					res.daily.forEach(item => {
						var val = {
							date: item.date,
							weather: item.text_day,
							temperature: item.high + "°/" + item.low + "°"
						}
						this.otherweather.push(val)
					})
				})
			},
			async getNowTemperature(val){
				var data = {
					params: {
						key: "SW_hd8gUq3n4fzxlF",
						location: val,
						language: "zh-Hans",
						unit: "c"
					}
				}
				await getNowTemperature(data).then(res=>{
					console.log("当前温度",res)
					this.now = res.now.temperature+"°"
					this.nowinfo = res.now.text
				})
			},
			async getNowAir(){
				let num = Math.floor(Math.random()*5)
				console.log("空气质量",num)
				this.wu = this.air[num]
			},
			jump(){
				uni.navigateTo({
					url: '/pages/search/search'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: calc(100vh - 44px);
		background-image: url('/static/beijing.jpg');
		background-size: 100% 100%;
		padding: 0 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #fff;

		.city {
			font-size: 70rpx;
			padding-top: 450rpx;
		}

		.weather {
			font-size: 150rpx;
		}

		.other {
			margin-top: 50rpx;
			width: 600rpx;
			height: 200rpx;
			background-color: #f5f5f5;
			border-radius: 20rpx;
			opacity: 0.5;
			display: flex;
			flex-direction: column;

			// justify-content: space-around;
			// align-items: ;
			.text {
				color: #000;
				margin: 10rpx 10rpx;
			}
		}
	}
</style>